<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>中国疫情可视化</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="sidebar.css" />
	</head>
	<body>

		<!-- 头部 -->
		<div class="layui-header">
			<h1 style="width: 100%; height: 20px;text-align: center;">
				众志成城，抗击疫情
			</h1>
		</div>

		<!-- 内容 -->
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md3">
					<!-- 累计治愈率与死亡率 -->
					<div id="main1" style="width: 250px;height:350px;"></div>
					<div id="main2" style="width: 250px;height:350px;"></div>
				</div>
				<div class="layui-col-md6">
					<!-- 疫情资讯 -->
					<div class="body_left_1">
						<h2 style="text-align: center;">最新信息</h2>
						<div id="view" style="text-align: center;" class="layui-collapse" lay-accordion style="width: 409px; height:400px;">
						</div>
					</div>
					<br><br>
					<h2 style="text-align: center;">疫情地图</h2>
					<div class="layui-main" id="laotang" style="width: 429px; height:400px;">
					</div>
				</div>
				<div class="layui-col-md3">
					<!-- 治愈率与死亡率 -->
					<div id="main" style="width: 400px;height:750px;"></div>
				</div>
			</div>
			<div id="main3" style="width: 1200px;height:300px;"></div>
		</div>

		<!--底部-->
		<div class="layui-footer" style="background-color: #2F4056;height: 50px;">
			<center>&copy; 2020 by 2020计算机设计大赛参赛作品</center>
			<center>数据来源：天行API数据平台，数据每十分钟更新一次</center>
		</div>

		<script src="layui/layui.js" type="text/javascript"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/china.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/data.js"></script>

		<!-- layui初始化 -->
		<script>
			//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
			layui.use('element', function() {
				var element = layui.element;
			});
		</script>


		<!-- 获取最新资讯数据 -->
		<script type="text/javascript">
			$.get("http://api.tianapi.com/txapi/ncov/index?key=8e895de2da4e281f8e0475ef03f270a3",
				function(data, status) {
					// console.log(data);
					var arr = [];
					//处理数据
					for (i = 1; i <= 3; i++) {
						// var zix = [];
						// zix = data.newslist[0].news[i];
						// console.log(zix);
						arr.push({
							name: data.newslist[0].news[i].title,
							value: data.newslist[0].news[i].summary,
							laiyuan: data.newslist[0].news[i].infoSource,
							shijian: data.newslist[0].news[i].pubDateStr,
							lianjie: data.newslist[0].news[i].sourceUrl
						});
					}
					// console.log(data.newslist[0].news[1].title);
					layui.use('laytpl', function() {
						var data = arr;
						var laytpl = layui.laytpl;
						var getTpl = demo.innerHTML,
							view = document.getElementById('view');
						laytpl(getTpl).render(data, function(html) {
							view.innerHTML = html;
						});
					});
				});
		</script>


		<!-- 获取疫情数据 -->
		<script type="text/javascript">
			$.get("http://api.tianapi.com/txapi/ncovcity/index?key=5d4fb67d8bd16c1fd371311e334a4bd0",
				function(data, status) {
					// console.log(data); // data就是获取到的数据，输出到控制台查看
					var name = [];
					var siwang = [];
					var zhiyu = [];
					var now = [];
					var quezhen = [];
					var yisi = [];
					var ljsiwang = 0;
					var ljzhiyu = 0;
					var ljyisi = 0;
					var ljnow = 0;
					var arr1 = [name, siwang, zhiyu, now, yisi, quezhen];
					// 处理数据，成地图需要的数据结构
					data.newslist.forEach(item => {
						// 循环的过程中，向空数组中加入所需的内容
						name.push(item.provinceShortName)
						siwang.push(100 * item.deadCount / item.confirmedCount)
						zhiyu.push(100 * item.curedCount / item.confirmedCount)
						now.push(100 * item.currentConfirmedCount / item.confirmedCount)
						quezhen.push(item.confirmedCount)
						yisi.push(item.suspectedCount)
						ljsiwang += item.deadCount
						ljzhiyu += item.curedCount
						ljyisi += item.suspectedCount
						ljnow += item.currentConfirmedCount
					});
					// console.log(ljsiwang);

					<!-- 基于准备好的dom，初始化echarts实例 -->
					var myChart = echarts.init(document.getElementById('main'));

					// 指定图表的配置项和数据
					var option = {
						title: {
							text: '各省疫情数据',
						},
						tooltip: {
							trigger: 'axis',
							formatter: '{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%<br />'
						},
						legend: {
							data: ['死亡', '治愈', '现存'],
							top: '23px',
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						toolbox: {
							feature: {
								saveAsImage: {}
							}
						},
						yAxis: {
							type: 'category',
							boundaryGap: false,
							data: arr1[0]
						},
						xAxis: {
							type: 'value',
							axisLabel: {
								show: true,
								interval: 'auto',
								formatter: '{value} %'
							},
							show: true
						},
						series: [{
								name: '死亡',
								type: 'bar',
								stack: '总量',
								data: arr1[1]
							},
							{
								name: '治愈',
								type: 'bar',
								stack: '总量',
								data: arr1[2]
							},
							{
								name: '现存',
								type: 'bar',
								stack: '总量',
								data: arr1[3]
							},
						]
					};

					myChart.setOption(option, true);
					var myChart1 = echarts.init(document.getElementById('main1'));
					var option = {
						title: {
							text: '全国累计治愈人数与死亡人数',
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: ['死亡', '治愈'],
							top: '23px',
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						toolbox: {
							feature: {
								saveAsImage: {}
							}
						},
						xAxis: {
							type: 'category',
							data: ['死亡', '治愈'],
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							data: [ljsiwang, ljzhiyu],
							type: 'bar',
							showBackground: true,
							backgroundStyle: {
								color: 'rgba(220, 220, 220, 0.8)'
							}
						}]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart1.setOption(option);
				});
		</script>


		<script type="text/javascript">
			$.get("http://api.tianapi.com/txapi/ncovcity/index?key=5d4fb67d8bd16c1fd371311e334a4bd0",
				function(data, status) {
					// console.log(data); // data就是获取到的数据，输出到控制台查看
					var name = [];
					var siwang = [];
					var zhiyu = [];
					var now = [];
					var quezhen = [];

					var ljsiwang = 0;
					var ljzhiyu = 0;

					var ljquezhen = 0;
					var arr1 = [name, siwang, zhiyu, now, quezhen];
					// 处理数据，成地图需要的数据结构
					data.newslist.forEach(item => {
						// 循环的过程中，向空数组中加入所需的内容
						name.push(item.provinceShortName)
						siwang.push(item.deadCount / item.confirmedCount)
						zhiyu.push(item.curedCount / item.confirmedCount)
						now.push(item.currentConfirmedCount / item.confirmedCount)
						quezhen.push(item.confirmedCount)

						ljsiwang += item.deadCount
						ljzhiyu += item.curedCount

						ljquezhen += item.confirmedCount
					});
					// console.log(ljsiwang);

					<!-- 基于准备好的dom，初始化echarts实例 -->

					var myChart1 = echarts.init(document.getElementById('main2'));
					var option = {
						title: {
							text: '全国累计确诊人数',
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: ['累计确诊', ],
							top: '23px',
						},
						grid: {
							left: '20%',
							right: '20%',
							bottom: '3%',
							containLabel: true
						},
						toolbox: {
							feature: {
								saveAsImage: {}
							}
						},
						xAxis: {
							type: 'category',
							data: ['累计确诊'],
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							data: [ljquezhen],
							type: 'bar',
							showBackground: true,
							backgroundStyle: {
								color: 'rgba(220, 220, 220, 0.8)'
							}
						}]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart1.setOption(option);
				});
		</script>


		<script>
			$.get("http://api.tianapi.com/txapi/ncovcity/index?key=ed013005833987b040e0db5552ea3393",
				function(data, status) {
					// console.log(data); // data就是获取到的数据，输出到控制台查看
					var arr = [];
					// 处理数据，成地图需要的数据结构
					data.newslist.forEach(item => {
						// 循环的过程中，向空数组中加入所需的内容
						arr.push({
							name: item.provinceShortName, // name固定
							value: item.confirmedCount, // value固定
							zuixin: item.currentConfirmedCount, // 当前确诊
							zhiyu: item.curedCount,
							siwang: item.deadCount
						});
					});
					// 循环结束之后，我们就得到了地图需要的数据了。数据是arr，但是还稍微有点问题
					// 手动自行添加一个南海诸岛的数据
					arr.push({
						name: '南海诸岛', // name固定
						value: '未统计', // value固定
						zuixin: '未统计', // 当前确诊
						zhiyu: '未统计',
						siwang: '未统计'
					});
					// 到此为止，所有的数据全部处理好了。
					// console.log(arr);
					var myChart = echarts.init(document.getElementById('laotang'));

					// 2. 配置
					var option = {
						// 标题部分
						// title: {
						// 	text: '众志成城，抗击疫情',
						// 	textStyle: {
						// 		fontSize: 28
						// 	},
						// 	left: 'center', // 左右居中
						// 	subtext: '数据可视化',
						// 	subtextStyle: {
						// 		fontSize: 14
						// 	}
						// },
						// 设置地图及数据
						series: [{
							type: 'map',
							map: 'china', // 指定是中国地图
							data: arr, // 设置地图中的数据
							label: { // 控制默认显示省的名字
								show: true
							}
						}],
						tooltip: { // 鼠标悬浮提示
							formatter: function(params) { // 允许我们自定义悬浮提示的内容
								console.log(params);
								// return 你需要提示的内容
								return `累计确诊：${params.data.value}<br/>
						当前确诊：${params.data.zuixin}<br/>
						治愈：${params.data.zhiyu}<br/>
						死亡：${params.data.siwang}<br/>
						`;
							}
						},
						visualMap: {
							type: 'piecewise',
							pieces: [{
									gt: 10000
								}, // 大于10000
								{
									gt: 5000,
									lte: 10000
								},
								{
									gt: 1000,
									lte: 5000
								},
								{
									gt: 500,
									lte: 1000
								}, // (900, 1500]
								{
									gt: 100,
									lte: 500
								}, // (310, 1000]
								{
									gt: 10,
									lte: 100
								}, // (200, 300]
								{
									gt: 0,
									lte: 10
								}, // (0, 10]
							],
							inRange: {
								color: ['#ffcfc3', '#eda595', '#d27b64', '#d5462a', '#a8352e', '#6a211d', '#562a2a']
							}
						}
					};

					// 3. 生成地图
					myChart.setOption(option);
				});
		</script>


		<script type="text/javascript">
			$.get("http://api.tianapi.com/txapi/ncovcity/index?key=4b214f87c5e07e9bd4e02f1495e66065",
				function(data, status) {
					// console.log(data); // data就是获取到的数据，输出到控制台查看
					var name = [];
					var quezhen = [];
					var yisi = [];
					var dangqian = [];
					var arr1 = [name, quezhen, yisi, dangqian];
					// 处理数据，成地图需要的数据结构


					data.newslist.forEach(item => {


						name.push(item.provinceShortName)
						quezhen.push(item.confirmedCount)
						yisi.push(item.suspectedCount)
						dangqian.push(item.currentConfirmedCount)
					});

					var myChart = echarts.init(document.getElementById('main3'));

					// 指定图表的配置项和数据
					var option = {
						title: {
							text: '各省当前疑似与确诊对比',
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: ['当前疑似', '当前确诊']
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						toolbox: {
							feature: {
								saveAsImage: {}
							}
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: arr1[0]
						},
						yAxis: {
							type: 'value'
						},
						series: [{
								name: '当前疑似',
								type: 'line',
								stack: '总量',
								data: arr1[2]
							},
							{
								name: '当前确诊',
								type: 'line',
								stack: '总量',
								data: arr1[3]
							}
						]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				});
		</script>


		<!-- 模板渲染 -->
		<script id="demo" type="text/html">
			{{#  layui.each(d, function(index, item){ }}	
			<div>
				<div class="header" >
					<p><strong><a href="{{ item.lianjie }}">{{ item.name }}</a>	</strong></p>
					<p>来源：{{ item.laiyuan }}</p>
					<p>时间：{{ item.shijian }}</p>
				</div>
				<div class="body">
				</div>
			</div>
			<hr>
			{{#  }); }}
		</script>

	</body>
</html>
